Update react-query depency to require at least v5.83#10838
Conversation
| ) | ||
| ``` | ||
|
|
||
| ## Enabling Data Fetching Conditionally |
There was a problem hiding this comment.
I'm not sure about where to put this documentation as it's actually useGetList that we configure.
fzaninotto
left a comment
fzaninotto
left a comment
There was a problem hiding this comment.
Could you also prepare the changelog to mention that there is a risk of duplicate react-query, and how to fix that?
| }, | ||
| "dependencies": { | ||
| "@tanstack/react-query": "^5.21.7", | ||
| "clsx": "^2.1.1", |
| GetInfiniteListResult<RecordType>, | ||
| ErrorType, | ||
| InfiniteData<GetInfiniteListResult<RecordType>>, | ||
| GetInfiniteListResult<RecordType>, |
There was a problem hiding this comment.
does that mean that the type of UseInfiniteQueryOptions has changed in react-query? That would be a breaking change.
There was a problem hiding this comment.
No I believe we used it incorrectly before but it wasn't detected until this update
There was a problem hiding this comment.
I think it's due to TanStack/query#8956. It doesn't seem to be a breaking change.
| : result, | ||
| [result] | ||
| ) as UseQueryResult<RecordType[], Error> & { | ||
| ) as unknown as UseQueryResult<RecordType[], Error> & { |
There was a problem hiding this comment.
Question: Why do we only need to do that when calling dataProvider.getList() and not for every other usage of useQuery (e.g. useGetOne) ?
There was a problem hiding this comment.
Because useGetOne returns the same format as react query and we made the decision to do things differently in all hooks that also return a total. Instead of data.total we wanted to have total directly on the result.
There was a problem hiding this comment.
For the record, I'd love to change that in v6
| const ConditionalDataFetchingView = () => { | ||
| const context = useListContext(); | ||
|
|
||
| if (context.filterValues.q == null || context.filterValues.q === '') { | ||
| return ( | ||
| <CardContentInner> | ||
| Type a search term to fetch data | ||
| </CardContentInner> | ||
| ); | ||
| } | ||
|
|
||
| return <BookList />; | ||
| }; |
There was a problem hiding this comment.
This story is working, but since you are rendering a different child when the filter condition is not true, we can't really tell if the dataProvider is called or not. It would help to enable the fakerest debug logs.
docs/List.md
Outdated
| context.filterValues.q == null || | ||
| context.filterValues.q === '' ? ( |
There was a problem hiding this comment.
Too bad you copied the wrong condition: in the docs the condition was q.length > 2 and not q !== '' 😅
fzaninotto
changed the title
3 participants
Problem
We received some requests and questions for enabling list components data fetching conditionally.
It's actually easier to do with react-query versions more recent than the one we install by default.
Solution
How To Test
Additional Checks
masterfor a bugfix or a documentation fix, ornextfor a featureAlso, please make sure to read the contributing guidelines.